<template>
	<view class="sleep-card">
		<image :style="{top:`${statusBarHeight + 53}px`}" style="width: 168px;height: 119px;position: absolute;right: 15px;"
			src="/static/images/homePage/fs-bg.png"></image>
		<view class="score" :style="{top:`${statusBarHeight + 100}px`}" >{{cardData.score}}</view>
		<view class="jkzs-border">
			<view class="jkzs">
				<u-row>{{cardData.title}}</u-row>
				<u-row align="bottom">{{cardData.status}} <u-rate gutter="1" active-color="#F0986A"
						inactive-color="#999999" inactiveIcon="star-fill" :count="count"
						v-model="cardData.value"></u-rate></u-row>
				<u-row><u-icon name="play-left-fill" color="#fff"></u-icon>{{cardData.date}}<u-icon
						name="play-right-fill" color="#fff"></u-icon></u-row>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				count: 5,
			}
		},
		props: ['sleepData','statusBarHeight'],
		components: {},
		computed: {
			cardData() {
				return this.sleepData || {
					title: '平均周睡眠分数',
					status: '良好',
					value: 4,
					date: '2025-02-12至2025-02-1'
				}
			}
		},
		methods: {}
	}
</script>
<style lang="scss">
	.sleep-card {
		.score {
			font-weight: bold;
			font-size: 28px;
			color: #FFFFFF;
			position: absolute;
			top: 140px;
			right: 81px
		}

		.jkzs-border {
			border-radius: 12px;
			margin-bottom: 12px;
			overflow: hidden;

			.jkzs {
				border: 1px solid;
				border-image: linear-gradient(225deg, rgba(112, 108, 99, 1), rgba(81, 69, 51, 1), rgba(255, 219, 180, 1), rgba(133, 113, 81, 1), rgba(90, 92, 80, 1)) 1 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 16px;
				width: 100%;
				min-height: 113px;
				background: #0B0F12;
				box-shadow: inset 0px 0px 12px 6px #2C281F;
				font-weight: bold;
				font-size: 20px;

				::v-deep .u-rate {
					margin-left: 8px;
				}

			}

			.jkzs .u-row:first-child {
				font-size: 14px;
				margin-bottom: 8px;
			}

			.jkzs .u-row:last-child {
				font-size: 13px;
				color: #999999;
				margin-top: 8px;
			}
		}
	}
</style>